import { BasicDrawer, useDrawerInner } from "@/components/Drawer";
import { BasicForm, useForm } from "@/components/Form";
import { addSalary, updateSalary } from "@/api/flandre-ui/request";
import { message } from "antd";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { getListSimpleUsers } from "@/api/system/user";
let staffId: String;
const SalaryDrawer = (props: { register: Fn; reload: Fn }) => {
	const { t } = useTranslation();
	const en_vi = "HRMS.salaryManagement";
	const [action, setAction] = useState(""); // 用来区分新增还是修改
	const [currentPkId, setCurrentPkId] = useState("");

	const salaryFormSchema = [
		{
			label: t(`HRMS.leaveApproval.staffName`),
			field: "staffName",
			component: "ApiSelect",
			colProps: { span: 24 },
			componentProps: {
				api: getListSimpleUsers,
				labelField: "nickname",
				valueField: "nickname",
				onChange: (_: any, value: any) => {
					if (!value) return;
					staffId = value.id;
				}
			}
		},
		{
			label: t(`${en_vi}.salaryType`),
			field: "salaryType",
			component: "Select",
			colProps: { span: 24 },
			componentProps: {
				options: [
					{ label: "Monthly Salary", value: 1 },
					{ label: "Quarterly Bonus", value: 2 },
					{ label: "Annual Bonus", value: 3 },
					{ label: "Welfare", value: 4 }
				]
			}
		},
		{
			label: t(`${en_vi}.basicSalary`),
			field: "salaryBas",
			component: "InputNumber",
			colProps: { span: 24 }
		},
		{
			label: t(`${en_vi}.positionSalary`),
			field: "salaryPoz",
			component: "InputNumber",
			colProps: { span: 24 }
		},
		{
			label: t(`${en_vi}.bonus`),
			field: "salaryBonus",
			component: "InputNumber",
			colProps: { span: 24 }
		},
		{
			label: t(`${en_vi}.deductionAmount`),
			field: "salaryDeduct",
			component: "InputNumber",
			colProps: { span: 24 }
		},
		{
			label: t(`${en_vi}.deductionReason`),
			field: "deductReason",
			component: "Input",
			colProps: { span: 24 }
		},
		{
			label: t(`${en_vi}.salaryDate`),
			field: "salaryDate",
			component: "DatePicker",
			colProps: { span: 24 },
			componentProps: { format: "YYYY-MM-DD" }
		},
		{
			label: t(`${en_vi}.status`),
			field: "status",
			component: "Select",
			colProps: { span: 24 },
			componentProps: {
				options: [
					{ label: "Regular", value: "0" },
					{ label: "Probative", value: "1" },
					{ label: "Resigned", value: "2" }
				]
			}
		}
	];

	const [registerForm, { validateFields, resetFields, setFieldsValue }] = useForm({
		labelWidth: 120,
		schemas: salaryFormSchema,
		showActionButtonGroup: false
	});

	const [registerDrawer, { closeDrawer }] = useDrawerInner(props.register, data => {
		resetFields();
		const record = data.record || {};
		setAction(data.action || "add");
		if (data.action === "edit") {
			setCurrentPkId(record.pkId);
			setFieldsValue(record);
		}
	});

	async function handleSubmit() {
		try {
			let values = await validateFields();
			values = {
				...values,
				staffId
			};
			if (values.salaryDate) values.salaryDate = values.salaryDate.split(" ")[0];
			if (action === "edit") {
				values.pkId = currentPkId;
				await updateSalary(values);
				message.success(t("kevin_ui.updateSuccess"));
			} else {
				await addSalary(values);
				message.success(t("kevin_ui.addedSuccessfully"));
			}
			props.reload();
			closeDrawer();
		} catch (error) {
			message.error(t("kevin_ui.operationFailed"));
		}
	}

	return (
		<BasicDrawer {...props} title={action === "edit" ? "Edit Salary" : "Add Salary"} register={registerDrawer} ok={handleSubmit}>
			<BasicForm register={registerForm} />
		</BasicDrawer>
	);
};

export default SalaryDrawer;
